<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./src/css/scroll/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" id="test-1" href="./src/layui/css/layui.css" />
    <link id="theme_fisrst" rel="stylesheet" href="./src/css/index_dark.css" />

    <title>首页</title>
</head>
<div id="calendar" class="pos layui-clear ">
    <div class="calendar-box">
        <div class="layui-inline" id="test-n1"></div>
    </div>
    <div class="right-car-box">
        <div class="avter">
            <div class="layout-anim">
                <!-- 管理员头像 -->
                <img src="./src/img/admin.jpeg" alt="" />
            </div>
            <div class="layout-admin-name text-center">白东阳</div>
            <div class="scroll-test ">
                <ul class="event-list">
                    <li>
                        跑半小晨跑半小晨跑半小
                    </li>
                    <li>
                        晨跑半小时
                    </li>
                    <li>
                        晨跑半小时
                    </li>
                    <li>
                        晨跑半小时
                    </li>
                    <li>
                        晨跑半小时
                    </li>
                    <li>
                        <a class="add-event" id="m-add-event" href="javascript:;">+添加事项</a>
                    </li>
                </ul>
            </div>
        </div>

    </div>

</div>

<body>

    <div class="layout_app " id="layout_app">
        <!-- 头部 -->
        <div class="layout-header">
            <a class="logo" href="javascript:;"></a>
            <div class="user-nav">
                <a class="use-nav-btn" href="javascript:;">
                    <span class="iconfont icon-icon-xgmm"></span>
                    <span>修改密码</span>
                </a>
                <a class="use-nav-btn" href="javascript:;">
                    <span class="iconfont icon-icon-jcbd"></span>
                    <span>解除绑定</span>
                </a>
                <a class="use-nav-btn" href="javascript:;">
                    <span class="iconfont icon-icon-tc"></span>
                    <span>退出</span>
                </a>
            </div>
        </div>
        <!-- 左侧菜单 -->
        <div class="layout-aside">
            <span class="aside-shrinkage " id="aside-shrinkage"></span>
            <div class="layout-anim">
                <!-- 管理员头像 -->
                <img src="./src/img/admin.jpeg" alt="" />
            </div>
            <div class="layout-admin-name text-center">白东阳</div>
            <div class="text-center offices-box">
                <a class="layout-btn-offices" href="javascript:;">省司法厅</a>
            </div>
            <div class="layout-menu" id="layout-menu">
                <ul class="layout-menu-levl">
                    <li class="">
                        <a class="menu-item active" href="./index.html">
                            <span class="sy iconfont icon-icon_nav_sy"></span>
                            <span class="menu-name">首页</span>
                        </a>
                    </li>
                    <li>
                        <a class="menu-item" href="./pages/my_app.html">
                            <span class="wdyy iconfont icon-icon_nav_wdyy"></span>
                            <span class="menu-name">我的应用</span>
                        </a>
                    </li>
                    <li>
                        <a class="menu-item" href="./pages/my_app.html">
                            <span class="tzgg iconfont icon-icon_nav_tzgg"></span>
                            <span class="menu-name">通知公告</span>
                        </a>
                    </li>
                    <li>
                        <a class="menu-item" href="./pages/data_show.html">
                            <span class=" sjzs iconfont icon-icon_nav_sjzs"></span>
                            <span class="menu-name">数据展示</span>
                        </a>
                    </li>
                    <li>
                        <a class="menu-item" href="./pages/download_center.html">
                            <span class="xzzx iconfont icon-icon_nav_wdyy"></span>
                            <span class="menu-name">下载中心</span>
                        </a>
                    </li>
                    <li>
                        <a class="menu-item layout-set" href="javascript:;">
                            设置
                        </a>
                        <ul>
                            <li>
                                <a class="menu-item" href="./pages/user_center.html">
                                    <span class=" grzx iconfont icon-icon_nav_grzx"></span>
                                    <span class="menu-name">个人中心</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="skin-list text-center" id="skin-list">
                <a data-theme="0" class="skin-list-item blue" href="javascript:;"></a>
                <a data-theme="1" class="skin-list-item black" href="javascript:;"></a>
                <a data-theme="2" class="skin-list-item purple" href="javascript:;"></a>
                <a data-theme="3" class="skin-list-item green" href="javascript:;"></a>
            </div>
        </div>
        <div class="layout-main">
            <div class="layout-main-con mC-con">
                <div class="car-bg">
                    <div class="car-bg-test">
                        <div class="car-bg-item"></div>
                        <div class="car-list layui-row" id="my-app-list">
                            <div class="layui-col-md2 layui-col-sm2 layui-col-xs2">
                                <span class="layui-icon layui-icon-loading-1"></span>
                                <!-- <div class=" car-item">
                                <a href="javawscript:;" class="car-item-con bgoa">
                                    办公oa >>
                                </a>
                        </div> -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 列表 -->
                <div class="layui-row layui-col-space18 layout-main-list">
                    <!-- 通知公告 -->
                    <div class="layui-col-md5 layui-col-sm5 layui-col-xs5"" style=" width:38%">
                        <div class="notice-list-box">
                            <div class="notice-list-title">通知公告 <a class="more-link" href="javascript:;">查看更多></a> </div>
                            <ul class="notice-list">
                                <li>
                                    <div class="li-txt">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="li-txt">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="li-txt">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="li-txt">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="li-txt">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                            </ul>
                        </div>

                    </div>
                    <!-- 下载中心 -->
                    <div class="layui-col-md5 layui-col-sm5 layui-col-xs5"" style=" width:38%">
                        <div class="notice-list-box">
                            <div class="notice-list-title">下载中心 <a class="more-link" href="javascript:;">查看更多></a> </div>
                            <ul class="notice-list">
                                <li>
                                    <div class="li-txt li-txt-download">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <a class="m-download iconfont icon-icon-" href="javascript:;"></a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="li-txt li-txt-download">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <a class="m-download iconfont icon-icon-" href="javascript:;"></a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="li-txt li-txt-download">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <a class="m-download iconfont icon-icon-" href="javascript:;"></a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="li-txt li-txt-download">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <a class="m-download iconfont icon-icon-" href="javascript:;"></a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="li-txt li-txt-download">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <a class="m-download iconfont icon-icon-" href="javascript:;"></a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="layui-col-md2 layui-col-sm2 layui-col-xs2"" style=" width:24%;">
                        <div class="calendar-car">
                            <div class="btns-wrapper">
                                <p> <span class="car-btn">农历十月十五</span></p>
                                <p>
                                    <span class="car-btn color-btn-blue" id="calendar-add-event"> <span class="iconfont icon-bi"></span> 添加事项</span></p>

                            </div>
                            <div>
                                今日
                                <span class="car-now-time">2018年11月</span>
                                <span class="car-btn">星期四</span>
                            </div>
                            <div>
                                <span class="car-big-date">22</span>日

                            </div>
                            <div class="car-reminders">
                                <div class="notice-list-box car-list">
                                    <ul class="notice-list">
                                        <li>
                                            <div class="li-txt ">
                                                <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                                <span class="m-time">2013-23-23</span>
                                            </div>

                                        </li>
                                        <li>
                                            <div class="li-txt ">
                                                <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                                <span class="m-time">2013-23-23</span>
                                            </div>

                                        </li>
                                        <li>
                                            <div class="li-txt ">
                                                <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                                <span class="m-time">2013-23-23</span>
                                            </div>

                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row layui-col-space18 layout-main-list">
                    <div class="layui-col-md10 layui-col-sm10 layui-col-xs10"" style=" width:76%">
                        <div class="notice-list-box b-notice-list-box">
                            <div class="notice-list-title">
                                <div class="notice-nav-box">
                                    <a class="n-n-btn  on" href="javascript:;">最新收文</a>
                                    <a class="n-n-btn " href="javascript:;">最新发文</a>
                                    <a class="n-n-btn " href="javascript:;">待办工作 <span class="badge">99</span></a>
                                </div>

                                <a class="more-link" href="javascript:;">查看更多></a>
                            </div>
                            <ul class="notice-list">
                                <li>
                                    <div class="li-txt new">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <span class="new-icon"></span>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="li-txt">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="li-txt">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="li-txt">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="li-txt">
                                        <a class="m-txt layui-elip " href="javascript:;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam praesentium laborum beatae similique nihil quo numquam voluptate delectus, non facilis eveniet tempore suscipit qui sequi. Maxime eaque impedit sit sapiente.</a>
                                        <span class="m-time">2013-23-23</span>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="layui-col-md2 layui-col-sm2 layui-col-xs2"" style=" width:24%;">
                        <div class="weather-wrapper">
                            <div>
                                <span class="weather-c">18</span>阴转晴
                                <img class="weather-icon" src="./src/img/weather-icon.png" alt="">
                            </div>
                            <div class="weather-air-box">
                                <span class="weather-air">空气良</span>
                                <span class="weather-pm">PM2.5 134</span>
                            </div>
                            <div class="weather-addres">
                                <span class="iconfont icon-dingwei"></span>
                                杭州

                                <span class="weather-wind">西南风</span>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <script id="mhyApp" type="text/html">
            {{#  layui.each(d, function(index, item){ }}
        <div class="layui-col-md2 layui-col-sm2 layui-col-xs2">
                <div class="car-item">
                    <a href="javawscript:;" class="car-item-con {{item.imgName}}">
                       {{item.name}} >>
                    </a>
                </div>
            </div>
            {{#  if(d.length === index+1){ }}
            <div class="layui-col-md2 layui-col-sm2 layui-col-xs2"">
                    <div class="car-item">
                <a href="./pages/my_app.html" class="car-item-con icon_tjyy">
                    添加应用 >>
                </a>
            </div>
             {{#  } }} 
            {{#  }); }}



    
    </script>
        <script src="./src/layui/layui.all.js"></script>
        <script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
        <script src="./src/js/scroll/jquery.mCustomScrollbar.js"></script>
        <script src="./src/js/index.js"></script>
        <script>
            $(window).on("load", function() {
                $(".mC-con").mCustomScrollbar({
                    theme: "dark",
                    autoHideScrollbar: true //自动隐藏滚动条
                }).css({
                    paddingRight: '0px'
                });
            });
            //主题切换
            setTheme(getThemeLink())
            $('#skin-list').on('click', 'a', function() {
                // 0-blue 1-dark 2-purple 3-green
                var $themeId = $(this).attr('data-theme');
                removeDarkTheme()
                setTheme(getThemeLink($themeId));
            })

            function getThemeLink(themeId) {
                var themeLink = '';
                var loca_theme = localStorage.getItem('theme')
                switch (themeId || loca_theme || 1) {
                    case '0':
                        localStorage.setItem('theme', '0');
                        themeLink = './src/css/index_blue.css'
                        break;
                    case '1':
                        localStorage.setItem('theme', '1');

                        themeLink = './src/css/index_dark.css'
                        break;

                    case '2':
                        localStorage.setItem('theme', '2');
                        themeLink = './src/css/index_purple.css'
                        break;

                    case '3':
                        localStorage.setItem('theme', '3');
                        themeLink = './src/css/index_green.css'
                        break;
                    default:
                        localStorage.setItem('theme', '0');
                        themeLink = './src/css/index_dark.css'
                        break;
                }
                return themeLink
            }

            function setTheme(themeLink) {
                var link = document.createElement('link');
                link.type = 'text/css';
                link.id = "theme-css"; // 加上id方便后面好查找到进行删除
                link.rel = 'stylesheet';
                link.href = themeLink;
                document.getElementsByTagName("head")[0].appendChild(link);

            }
            // 删除主题
            function removeDarkTheme() {

                $('#theme-css').remove();
            }
            // mini布局切换
            $('#aside-shrinkage').on('click', function() {
                $('.layout_app').toggleClass('mini-layout')
            })

            // 菜单选择
            $('#layout-menu').on('click', '.menu-item ', function(e) {
                // e.preventDefault();
                $('#layout_app').hasClass('mini-layout') ? $('#layout_app').removeClass('mini-layout') : '';
                if ($(this).hasClass('layout-set')) {
                    $(this).toggleClass('collpage');
                    return
                }
                $('#laypout-iframe').attr('src', $(this).attr('href'))
                $('#layout-menu .menu-item').removeClass('active');
                $(this).addClass('active');

            })
        </script>
</body>

</html>